<template>
	<div class="Tfooters">
		<div class="Tf1">
			<p>共{{ $store.state.common.totalNums }}条记录，当前第 {{ num }}/{{ $store.state.common.totalPages }} 页</p>
			<el-row>
				<el-button type="primary" :class="[firstclass]" @click='first'>首页</el-button>
				<el-button type="primary" :class="[secondclass]" @click="pre"
					>上一页</el-button
				>
				<el-button type="primary" :class="[thirdclass]"  @click="next"
					>下一页</el-button
				>
				<el-button type="primary" :class="[fourthclass]" @click='last'
					>尾页</el-button
				>
			</el-row>
			<select name="" class="selects">
				<option value="">10条/页</option>
			</select>
			<span>跳至</span>
			<input v-model="input" placeholder="1" />
			<span>页</span>
			<el-row>
				<el-button type="primary" class="actives" @click="goPage">GO</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
export default {
	props: ["uurl"],
	// data选项必须要求是一个函数，函数必须返回一个普通的对象
	data: function() {
		return {
			num: 1,
			goodscategorys: [],
			viewcategorys: [],
			firstclass: "actives",
			secondclass: "unableclick",
			thirdclass: "ableclick",
			fourthclass: "ableclick",
			input: "",
		}
	},
	created() {
  },
  methods:{
    next(){
      if(this.num<this.$store.state.common.totalPages){
        this.num++
        this.$store.commit("common/setNowPage",this.num);
      }
    },
    pre(){
      if(this.num>1){
        this.num--
        this.$store.commit("common/setNowPage",this.num);
      }
    },
    last(){
      this.num =this.$store.state.common.totalPages
      this.$store.commit("common/setNowPage",this.num);
    },
    first(){
      this.num =1
      this.$store.commit("common/setNowPage",this.num);
    },
    goPage(){
      if(this.input<=this.$store.state.common.totalPages && this.input>0){
        this.num =this.input
        this.$store.commit("common/setNowPage",this.num);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/goodsfooter.scss";
</style>
